<template>
    <PanelHead :route="route" />
    <div class="btns">
        <el-button  :icon="Plus" type="primary"  @click="open()">新增</el-button>
    </div>
    <el-table :data="tableData.list" style="width: 100%;">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="昵称"></el-table-column>
        <el-table-column prop="permissionName" label="菜单权限" width="400px"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
               <div>你</div>
                <el-button type="primary" @click="open(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-info">
        <el-pagination
      v-model:current-page="paginationData.pageNum"
      size="small"
      :page-size="paginationData.pageSize"
      :background="false"
      layout="total, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
    <el-dialog v-model="dialogFormVisable" :before-close="beforeClose" title="添加权限" width="500">
        <el-form :rules="rules" ref="formRef" label-width="100px" label-position="left" :model="form">
            <el-form-item v-show="false" prop="id">
                <el-input v-model="form.id" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请填写权限名称"></el-input>
            </el-form-item>
            <el-form-item label="权限" prop="permissions">
                <el-tree ref="treeRef" style="max-width: 600px;" :data="permissions" node-key="id" show-checkbox
                    :default-checked-keys="defaultKeys" default-expanded-keys="[2]" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="footer">
                <el-button type="primary" @click="confirm(formRef)">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue';
import { userGetmenu, userSetmenu, menuList } from '../../../api'
import { Plus} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
const route = useRoute() 
// 弹窗的显示隐藏
const dialogFormVisable = ref(false)

// form的数据
const form = reactive({
    id: '',
    name: '',
    permission: ''
})

// 树形菜单权限数据
const permissions = ref([])
// 默认的数据
const defaultKeys = [4, 5]

onMounted(() => {
    // 菜单数据
    userGetmenu().then(({ data }) => {
        permissions.value = data.data
    })
    getListData()
})

// 打开弹窗
const open = (rowData = {}) => {
    dialogFormVisable.value = true
    // 弹窗打开form生成是异步的
    nextTick(() => {
        if (rowData) {
            Object.assign(form, { id: rowData.id, name: rowData.name })
            treeRef.value.setCheckedKeys(rowData.permission)
        } else {
            // 如果没有传入rowData，清空表单
            Object.assign(form, { id: '', name: '', permission: '' })
            treeRef.value.setCheckedKeys([])
        }
    })
}

const paginationData = reactive({
    pageNum: 1,
    pageSize: 10
})

// 列表数据
const tableData = reactive({
    list: [],
    total: 0
})

const handleCurrentChange = (val)=>{
    paginationData.pageSize = val
    getListData()
}

const handleSizeChange = (val) =>{
    paginationData.pageNum = val
    getListData()
}
// 请求列表数据
const getListData = () => {
    menuList(paginationData).then(({ data }) => {
        const { list, total } = data.data
        tableData.list = list
        tableData.total = total
    })
}

// 关闭弹窗的回调
const beforeClose = () => {
    dialogFormVisable.value = false
    //重置表单
    formRef.value.resetFields()
    //tree选择的重置
    treeRef.value.setCheckedKeys(defaultKeys)
}

// 选中权限
const treeRef = ref()

const formRef = ref([])

// 规则校验
const rules = reactive({
    name: [{ required: true, trigger: 'blur', message: "请输入权限名字" }]
})

// 确认校验
const confirm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 获取treecheckbox数据
            const checkedKeys = treeRef.value.getCheckedKeys()

            userSetmenu({ name: form.name, permissions: JSON.stringify(checkedKeys), id: form.id }).then(({ data }) => {
                console.log(data)
                // 关闭弹窗并重新获取列表数据
                dialogFormVisable.value = false
                getListData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style lang="less" scoped>
.btns{
    padding: 10px 0 10px 10px;
    background-color: #fff;
}
</style>
